<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="(item, index) in categoryList" :key="index" class="f-item b-b" :class="{ active: item.category_name === currentId }" @click="tabtap(item.category_name)">
				{{ item.category_name }}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<view v-for="(item, index) in categoryList" :key="index" class="s-list" :id="'main-' + item.category_name">
				<text class="s-item">{{ item.category_name }}</text>
				<view class="t-list">
					<view @click="navToList(titem.id)" class="t-item" v-for="titem in item.tags" :key="titem.id">
						<!-- <image :src="titem.picture"></image> -->
						<text>{{ titem.name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			sizeCalcState: false,
			tabScrollTop: 0,
			currentId: 1,
			flist: [],
			slist: [],
			tlist: [],
			categoryList: []
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		loadData() {
			var that = this;
			beeApp.api(
				'/mall/tag/getCategory',
				{
					shop_id: 328
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.categoryList = res.data;
					that.currentId = that.categoryList[0]['category_name'];
					console.log(res);
				}
			);
			// list.forEach(item=>{
			// 	if(!item.pid){
			// 		this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类
			// 	}else if(!item.picture){
			// 		this.slist.push(item); //没有图的是2级分类
			// 	}else{
			// 		this.tlist.push(item); //3级分类
			// 	}
			// })
		},
		//一级分类点击
		tabtap(key) {
			if (!this.sizeCalcState) {
				this.calcSize();
			}
			this.currentId = key;
			let index = this.categoryList.findIndex(sitem => sitem.category_name === key);
			this.tabScrollTop = this.categoryList[index]['tags']['0'].top;
		},
		//右侧栏滚动
		asideScroll(e) {
			if (!this.sizeCalcState) {
				this.calcSize();
			}
			let scrollTop = e.detail.scrollTop;
			let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
			let index = this.slist.findIndex(sitem => sitem.pid === key);
			if (tabs.length > 0) {
				this.currentId = tabs[0].category_name;
			}
		},
		//计算右侧栏每个tab的高度等信息
		calcSize() {
			let h = 0;
			this.categoryList.forEach(item => {
				let view = uni.createSelectorQuery().select('#main-' + item.category_name);
				view.fields(
					{
						size: true
					},
					data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}
				).exec();
			});
			this.sizeCalcState = true;
		},
		navToList(tid) {
			uni.navigateTo({
				url: `/pages/product/list?tid=${tid}`
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #f8f8f8;
}

.content {
	display: flex;
}
.left-aside {
	flex-shrink: 0;
	width: 200upx;
	height: 100%;
	background-color: #fff;
}
.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100upx;
	font-size: 28upx;
	color: $font-color-base;
	position: relative;
	&.active {
		color: $base-color;
		background: #f8f8f8;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 36upx;
			width: 8upx;
			background-color: $base-color;
			border-radius: 0 4px 4px 0;
			opacity: 0.8;
		}
	}
}

.right-aside {
	flex: 1;
	overflow: hidden;
	padding-left: 20upx;
}
.s-item {
	display: flex;
	align-items: center;
	height: 70upx;
	padding-top: 8upx;
	font-size: 28upx;
	color: $font-color-dark;
}
.t-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: #fff;
	padding-top: 12upx;
	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}
.t-item {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 176upx;
	font-size: 26upx;
	color: #666;
	padding-bottom: 20upx;

	image {
		width: 140upx;
		height: 140upx;
	}
}
</style>
